<!--
    group: 系统设置
    name: 消息通知
    url: /setting/notification
-->
<template>
  <div>
    <div class="box">
      <p class="title">
        <span>系统通知</span>
        <a-select style="min-width: 130px"
                  placeholder="通知类型"
                  label-in-value
                  :default-value="{ key: '' }"
                  @change="handleChange"
        >
          <!--业务类型: 客户入驻 企业服务 发票申请 税率设置 开票规则 经营范围 服务模式设置 订单待支付-->
          <a-select-option v-for="item in businessList" :key="item.key" :value="item.key">{{ item.value }}</a-select-option>

        </a-select>
        <span @click="setRead">全部标记为已读</span>
      </p>
      <div style="margin-top: 20px;" v-if="listData.length > 0">
        <ul class="content">
          <li class="item" v-for="item in listData" @click="seeDetails(item.bizUrl,item.id)" :class="item.isRead == 0 ? 'item1' : 'item2'">
            <div class="iteon">
              <span v-if="item.isRead == 0" class="size_icon"></span>
              <div class="div">
                <p class="iteon_content">
                  <span>【{{item.bizTypeName}}】</span>
                  <span class="item_content">{{ item.msgContent }}</span>
                </p>
                <span class="one-time">{{ item.createTime }}</span>
              </div>
            </div>
            <a>查看<a-icon type="right" /></a>
          </li>
        </ul>
        <a-pagination
          v-model="page.currentPage"
          :page-size-options="['5', '10', '20']"
          :show-total="total => `共 ${total} 条`"
          :total="page.totalCount"
          show-size-changer
          :page-size="page.pageSize"
          @showSizeChange="onSizeChange"
          @change="onPageChange"
        >
        </a-pagination>
      </div>
      <div style="margin-top: 20px;" v-else>
        <a-empty />
      </div>
    </div>
  </div>
</template>

<script>
import { queryMsgList, queryReadMsg,querySetRead } from '../../api/setting'
import { getReadTotal } from '../../common/interfaceData'
export default {
  name: 'notification',
  inject: ['reload'],
  data(){
    return {
      page: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        totalPage: 0, // 总页数
        totalCount: 0, // 总条数
        params: {}, // 查询参数对象
        list: [], // 数据
      },
      businessList: [
        {
          key: '',
          value: '通知类型'
        },
        {
          key: 0,
          value: '客户入驻'
        },
        {
          key: 1,
          value: '企业服务'
        },
        {
          key: 2,
          value: '发票申请'
        },
        {
          key: 3,
          value: '税率设置'
        },
        {
          key: 4,
          value: '开票规则'
        },
        {
          key: 5,
          value: '经营范围'
        },
        {
          key: 6,
          value: '服务模式设置'
        },
        {
          key: 7,
          value: '订单待支付'
        },
        {
          key: 8,
          value: '电子税务局密码通知'
        },
      ],   //业务类型
      listData: [],
      selectType: undefined  //选中类型
    }
  },
  mounted() {
    this.getMsgList()
  },
  methods:{
    //选择页数
    onPageChange(newPage) {
      this.page.currentPage = newPage;
      this.getMsgList(this.selectType);
    },
    // 页面变化
    onSizeChange(current, newSize) {
      this.page.pageSize = newSize;
      this.getMsgList(this.selectType);
    },
    //下拉框选中
    handleChange(value){
      // console.log(value)
      this.selectType = value.label;
      this.page.currentPage = 1;
      this.getMsgList(this.selectType);
    },
    //查看
    seeDetails(url,id){
      let params = {};
      params.msgId = id;
      queryReadMsg(params).then(res => {
        if (res.success){
          this.$router.push({
            path: url
          })
          //调用祖先组件的 provide 的 reload 方法进行手动刷新
          this.reload();
          this.getMsgList(this.selectType);
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //全部标记为已读
    setRead(){
      if (this.listData.length <= 0){
        this.$message.warning('暂无数据可标记已读');
      }else{
        querySetRead().then(res => {
          if (res.success){
            this.$message.success('标记成功');
            this.getMsgList();
            //调用祖先组件的 provide 的 reload 方法进行手动刷新
            this.reload();
            return getReadTotal(this);
          }else{
            this.$message.warning(res.message);
          }
        })
      }
    },
    //获取列表
    getMsgList(type){
      let params = {};
      if (type == '通知类型'){
        params.data = {
          bizTypeName: ''   //消息类型名称  ''全部
        }
      }else{
        params.data = {
          bizTypeName: type   // 业务类型 ==>  客户入驻 用工场景 合同签署 任务广场 发票申请 业务结算 黑名单 权限费率 服务费率 用工场景 支付通道 企业服务 发票申请 税率设置 开票规则 经营范围 服务模式设置
        }
      }
      params.pageNo = this.page.currentPage;
      params.pageSize = this.page.pageSize;
      queryMsgList(params).then(res => {
        if (res.success){
          const data = res.result || {};
          // 赋值list数据
          this.listData = data.records || [];
          // 赋值总条数
          this.page.totalCount = data.total || 0;
        }else{
          this.$message.warning(res.message)
        }
      })
    }
  }

}
</script>

<style scoped lang="less">
.breadcrumb{
  background:#fff;
  height: 60px;
  line-height: 30px;
  color: #101010;
  font-weight: bold;
}

.box{
  width: 100%;
  background: @color-white;
  margin-top: 20px;
  text-align: left;
  box-sizing: border-box;
  padding: 30px 8px;
  .title{
    font-size: 18px;
    color: #101010;
    font-weight: inherit;
    display: flex;
    align-items: center;
    span:nth-child(1){
      text-indent: 1em;
      margin-right: 5px;
      font-size: 16px;
      font-weight: bold;
    }
    span:last-child{
      font-size: 14px;
      color: @color-lightGary;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .content{
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    .item{
      width: 100%;
      list-style: none;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      margin-bottom: 20px;
      .iteon{
        display: flex;
        align-items: center;
        .size_icon{
          width: 12px;
          height: 12px;
          display: inline-block;
          background: @color-red;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .div{
        display: flex;
        flex-wrap: wrap;
        p{
          margin-bottom: 0;
        }
        .iteon_content{
          display: flex;
          align-items: center;
          .item_content{
            margin-left: 20px;
            display: inline-block;
            max-width: 1000px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            span:nth-child(1){
              font-weight: bold;
            }
          }
        }
        .one-time{
          display: block;
          width: 100%;
          margin-left: 5px;
          font-size: 14px;
          margin-top: 5px;
        }
      }
      a{
        text-decoration-line: underline;
        white-space: nowrap;
      }
    }
    .item:hover{
      cursor: pointer;
    }
    .item1{
      background: #F3F6FD;
      .iteon_content > span:nth-child(1){
        color: @color-smudge;
        font-weight: bold;
      }
      .iteon_content > span:nth-child(2){
        color: @color-gary;
      }
    }
    .item2{
      background: #F9F8F9;
      color: @color-lightGary;
      font-weight: bold;
    }
  }
}

//下拉框
.title{
  /deep/.ant-select-selection{
    background: #FFFFFF;
    border: 1px solid @color-blue;
  }
  /deep/.ant-select-selection__placeholder, .ant-select-search__field__placeholder{
    color: @color-blue;
  }
  /deep/.ant-select-selection-selected-value{
    color: @color-blue;
  }
  /deep/.ant-select-arrow{
    color: @color-blue;
  }
}
///deep/.ant-select-selection__placeholder{
//  display: block!important;
//}
// 分页
.ant-pagination{
  text-align: right;
  margin-top: 30px;
}
</style>

